import {AtFloatLayout, AtIcon, AtModal, AtModalAction, AtModalContent, AtModalHeader} from "taro-ui";
import {Text, View, Image, Block, Button} from '@tarojs/components';
import React, { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import {http} from "../../../utils/http";
import {ACTIVITY_CHECK, OPEN_ACTIVITY_CHECK, USER_SALE_SUB} from "../../../constants/api";
import {user} from "../../../utils/user.service";
import './detail-bar.scss';

interface DetailBarType {
  goodStatus: number
  limitGoodsId?: any
  goodsDiscountCodeType?: any
  goodsDiscountCodeId?: any
  onGetPoster?: any
  category?: number
  onGotoBuy?: any
  goodsImg?: any
  onGotoCom?: any
  onGotoHome?: any
  onContact?: any
  weChat?: any
  showBuy?: boolean
  showService?: boolean
  inSale?: boolean
  isSupportGroup?: boolean
  onOpenModel?: any
  showShare?: boolean
  handleCancel?: any
  qrImg?: any
  onWXOpenModel?: any
  platformSet?: any
  wxModalShow?: boolean
  isOpened?: boolean
  showLoading?: boolean
  isLogin?: boolean
  wxhandleCancel?: any
  commissionPrice?: any
  fromOrderNum?: any
  onOffCar?: any
  goods?: any
  good?: any
  groupBuyId?: any
  tempSellerId?: any
  goodUuid?: any
  groupDetail?: any
  overFlag?: any
  pubFlag?: any
  wxQrImg?: any
  forcePlatformSeller?: any
  subscribe?: any
  removeMSG?: any
  getMSG?: any
  uuid?: any
  bdInfo?: any
  notTwoOrder?: any
  isShowShareButton?: any
  calendarData?: any
  isFreeVisit?: boolean
}

const OtherBar: React.FC<DetailBarType> = (props: any) => {
  const [isOpened, setIsOpened] = useState(false)
  const [bdInfo, setBdInfo] = useState(false);
  const [isLogin, setIsLogin] = useState(0);
  const [bdKey, setBdKey] = useState();
  const [isGroupOpened, setIsGroupOpened] = useState(false)
  const [index, setIndex] = useState(0)
  const [displayIndex, setDisplayIndex] = useState(0)
  const [displayIndexTwo, setDisplayIndexTwo] = useState(0)
  const [modalShow, setModalShow] = useState(false);
  const [tmplIds, setTmplIds] = useState([]);
  useEffect(() => {
    if (props.platformSet) {
      setTmplIds(props.platformSet.saleMessageTemplateId)
    }
  }, [props.platformSet])
  useEffect(() => {
    if (props.isOpened) {
      setIsOpened(true)
    } else {
      setIsOpened(false)
    }
  }, [props.isOpened])

  useEffect(() => {
    setBdInfo(props.bdInfo)
  }, [props.bdInfo])

  useEffect(() => {
    if (process.env.TARO_ENV === 'tt') {
      setBdKey(http.getBDKey())
    }
  }, [])

  useEffect(() => {
    setIsLogin(props.isLogin)
  }, [props.isLogin])

  const getMSG = async () => {
    if (!isLogin) {
      await user.jumpLogin()
      return
    }
    const uuid = props.uuid
    try {
      const acceptAry = []
        [process.env.TARO_ENV === 'tt' ? 'tt' : 'TARO']['requestSubscribeMessage']({
        tmplIds,
        success(res) {
          //[tmplIds]是动态的键，即模板id，值包括'accept'、'reject'、'ban'、'filter'。'accept'表示用户同意订阅该条id对应的模板消息，'reject'表示用户拒绝订阅该条id对应的模板消息，'ban'表示已被后台封禁，'filter'表示该模板因为模板标题同名被后台过滤。例如 { errMsg: "requestSubscribeMessage:ok", zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: "accept"} 表示用户同意订阅zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE这条消息
          tmplIds.map((item, i) => {
            if (res[item] == 'accept') {
              acceptAry.push(item)
            }
          })
          if (acceptAry.length > 0) {
            http.post(USER_SALE_SUB, {goodsUUID: uuid, templateIds: acceptAry.join(",")})
            props.getMSG()
          }
        }
      })
    } catch (e) {
      Taro.showModal({
        title: '提示',
        content: '为了提供更好的服务，建议您开启订阅消息',
        success: (res) => {
          if (res.confirm) {
            Taro.openSetting()
          }
        }
      })
    }
  }

  const showImg = () => {
    Taro.previewImage({
      current: props.goodsImg, // 当前显示图片的http链接
      urls: [props.goodsImg]// 需要预览的图片http链接列表
    })
  }

  const checkJump = () => {
    if (Taro.getCurrentInstance().router.params.pkeys) {
      Taro.showToast({title: 'pc端此功能只做模拟，具体请前往移动端体验！', duration: 3500, icon: 'none'})
      return false
    }
    return true
  }

  const choiceSpecs = (i) => {
    setIndex(i)
  }

  const getParams = () => {
    return `force_platform_seller=${props.forcePlatformSeller}&`
  }

  const sureBtnGroup = async () => {
    let stepNum = 0
    let groupPrice
    let id
    const activity_id = props.groupDetail.activity_id
    if (props.groupDetail.activity_type === 3) {
      stepNum = props.groupDetail['goods_step_list'][displayIndex].step_list[displayIndexTwo].step_num
      groupPrice = props.groupDetail['goods_step_list'][displayIndex].step_list[displayIndexTwo].group_price
      id = props.groupDetail['goods_step_list'][displayIndex].goods_id
    } else {
      id = props.groupDetail['goods_list'][displayIndex].goods_id
      groupPrice = props.groupDetail['goods_list'][displayIndex].group_price
    }
    const data = await http.HPost(OPEN_ACTIVITY_CHECK, {activity_id})
    if (data.data !== '校验通过') {
      return
    }
    Taro.navigateTo({url: `/main/order/confirm?${getParams()}itemId=` + id + '&m=limited' + '&tempSellerId=' + props.tempSellerId + `&activityId=${activity_id}&isLeader=true&stepNum=${stepNum}&groupPrice=${groupPrice}&goodUuid=${props.goodUuid}`})
  }
  const sureBtn = async () => {
    if (isLogin) {
      if (process.env.TARO_ENV === 'tt') {
        const curGood = props.good[index]
        if (props.good[index].douyinGoodsType != 0) {
          return Taro.navigateTo({url: `/pay/payReplaceZJpay/index?id=${curGood.id}&uuid=${curGood.uuid}&douyin_product_type=${curGood.douyinGoodsType}&bd_type=${bdInfo.type}`})
        }
      }
      if (props.goods.isSupportGroup && props.good[index].sale_style != 1) {
        let url = `/main/order/combination?${getParams()}itemId=` + props.good[index].uuid + '&type=' + 'good' + '&uuid=' + props.goods.uuid + '&category=' + props.goods.category + (props.tempSellerId ? '&tempSellerId=' + props.tempSellerId : '') + (props.fromOrderNum ? `&fromOrderNum=${props.fromOrderNum}` : '') + `&limitGoodsId=${props.limitGoodsId}&goodsDiscountCodeType=${props.goodsDiscountCodeType}&goodsDiscountCodeId=${props.goodsDiscountCodeId}`
        if (props.good[index].is_dayparting_appointment && props.good[index].is_dayparting_appointment == 1) {
          url += '&isDaypartingAppointment=1'
        }
        Taro.navigateTo({
          url
        })
      } else {
        let url = `/main/order/confirm?${getParams()}itemId=` + props.good[index].id + (props.tempSellerId ? '&tempSellerId=' + props.tempSellerId : '') + (props.fromOrderNum ? `&fromOrderNum=${props.fromOrderNum}` : '') + `&limitGoodsId=${props.limitGoodsId}&goodsDiscountCodeType=${props.goodsDiscountCodeType}&goodsDiscountCodeId=${props.goodsDiscountCodeId}`
        if (props.good[index].is_dayparting_appointment && props.good[index].is_dayparting_appointment == 1) {
          url += '&isDaypartingAppointment=1'
        }
        Taro.navigateTo({
          url
        })
      }
    } else {
      user.jumpLogin()
    }
  }
  const handleOpen = async () => {
    setIsGroupOpened(true)
  }
  const handleClose = () => {
    setIsGroupOpened(false)
  }
  const choiceSpecsTeam = (i) => {
    setDisplayIndex(i)
    setDisplayIndexTwo(0)
  }
  const choiceSpecsTeamTwo = (i) => {
    setDisplayIndexTwo(i)
  }
  return (
    <View className='detailBar'>
      {!props.showLoading && <View className='service-box tt-service-box'>
        <View className='service-item goto-home' onClick={props.onGotoHome}>
          <View className='home'><AtIcon value='icon icon-shouye-01' customStyle='font-size: 20px' size='20' color='#000' /></View>
          <View className='text'>首页</View>
        </View>
        {process.env.TARO_ENV !== 'tt' && props.showService && (!props.qrImg || props.qrImg === 'variable_code_close') &&
          <View className='service-item goto-service' onClick={props.onContact}>
            <View className='kefu'><AtIcon value='icon icon-kefu-01' customStyle='font-size: 20px' size='20' color='#000' /></View>
            <View className='text'>客服</View>
          </View>}
        {process.env.TARO_ENV !== 'tt' && props.showService && (props.qrImg && props.qrImg !== 'variable_code_close') &&
          <View className='service-item goto-service' onClick={() => {
            setModalShow(true)
          }}
          >
            <View className='kefu'><AtIcon value='icon icon-kefu-01' customStyle='font-size: 20px' size='20' color='#000' /></View>
            <View className='text'>客服</View>
          </View>}
        {process.env.SHOW_SHARE_POSTER && props.groupDetail && props.inSale && props.isShowShareButton && props.goodStatus !== 0 &&
          <View className={`service-item ${!props.showService && 'no-kefu'}`} onClick={props.onGetPoster}>
            <View className='kefu'>
              <AtIcon value='icon icon-fenxiang-01-01' customStyle='font-size: 20px' size='20' color='#000' />
            </View>
            <View className='text'>分享</View>
          </View>}
        {/*如果是未开售（全是抢购未开售），显示开售提醒，并即将开售*/}
        {process.env.SHOW_SHARE_POSTER && props.groupDetail && props.inSale && props.isShowShareButton && props.goodStatus == 0 &&
          <View className={`service-item ${!props.showService && 'no-kefu'}`} onClick={props.onGetPoster}>
            <View className='kefu'>
              <AtIcon value='icon icon-fenxiang-01-01' customStyle='font-size: 20px' size='20' color='#000' />
            </View>
            <View className='text'>分享</View>
          </View>}
        {process.env.TARO_ENV === 'tt' && <Button className='tt-button service-item goto-service' open-type='contact'>
          <View className='kefu'><AtIcon value='icon icon-kefu-01' customStyle='font-size: 20px' size='20' color='#000' /></View>
          <View className='text'>客服</View>
        </Button>}
        {process.env.TARO_ENV === 'tt' && <Button className='tt-button service-item goto-service' open-type='share'>
          <View className='kefu'><AtIcon value='icona-xingzhuangjiehe2' prefixClass='tabpole' customStyle='font-size: 20px' size='20'
            color='#000'
          /></View>
          <View className='text'>分享</View>
        </Button>}
      </View>}
      {process.env.TARO_ENV !== 'tt' && !props.showLoading && !props.isShowShareButton && !(props.isFreeVisit && (process.env.P_ENV == 'vc' || process.env.P_ENV == 'kunxin')) &&
        <View className='btn-box btn-box-right'>
          <View
            className='isShowShareButtonFalse capsules product-capsules'
          >
            {!props.groupDetail ? <Block>
              {props.inSale && props.showBuy && props.good.length > 0 &&
                <View className={`limited singleLimited ${(props.pubFlag || props.overFlag) && 'placeDisabled'}`}
                  onClick={props.onGotoBuy}
                >
                  <View className='top'>{props.overFlag ? '已结束' : props.pubFlag ? '已下架' : '立即下单'}</View>
                  {process.env.DISTINGUISH_IDENTITY && !!props.commissionPrice &&
                    <View className='bottom'>购买返<Text className='dollar'>￥</Text><Text
                      className='true-price'
                    >{props.commissionPrice}</Text></View>}
                </View>}
              {props.isSupportGroup && <View className='limited singleLimited' onClick={props.onGotoCom}>
                <View className='top'>立即下单</View>
                {process.env.DISTINGUISH_IDENTITY && !!props.commissionPrice &&
                  <View className='bottom'>购买返<Text className='dollar'>￥</Text><Text
                    className='true-price'
                  >{props.commissionPrice}</Text></View>}
              </View>}
            </Block> : <Block>{/* 拼团 */}
              {props.inSale && props.showBuy && props.good.length > 0 &&
                <View className='goto-buy-btn share' onClick={props.onGotoBuy}>
                  <View className='top'>单独购买</View>
                  <View className='bottom'><Text className='dollar'>￥</Text><Text
                    className='true-price'
                  >{props.good[0].price}</Text></View>
                </View>}
              {props.isSupportGroup && <View className='goto-buy-btn share' onClick={props.onGotoCom}>
                <View className='top'>单独购买</View>
                <View className='bottom'><Text className='dollar'>￥</Text><Text
                  className='true-price'
                >{props.good[0].price}</Text></View>
              </View>}
              {props.good.length > 0 && <View className='box-wrapper'>
                <View className='capsules product-capsules'>
                  {!props.groupDetail.is_join && props.groupDetail.is_share === '0' &&
                    <View className='goto-buy-btn limited' onClick={handleOpen.bind(this)}>
                      <View className='top'>立即开团</View>
                      <View className='bottom'><Text className='dollar'>￥</Text><Text
                        className='true-price'
                      >{!!props.groupDetail.discounts_price ? props.groupDetail.discounts_price : props.groupDetail.group_price}</Text></View>
                    </View>}
                  {!!props.groupDetail.is_join &&
                    <View className='goto-buy-btn limited' onClick={async () => {
                      if (checkJump()) {
                        if (!(await user.checkLogin())) {
                          user.jumpLogin()
                        } else {
                          Taro.navigateTo({url: `/common/group/detail?orderNum=${props.groupDetail.order_num}&category=1&itemId=${props.goodUuid}`})
                        }
                      }
                    }}
                    >
                      <View className='top'>查看我的团</View>
                    </View>}
                  {!props.groupDetail.is_join && isLogin && props.groupDetail.is_share === '1' &&
                    <View className='goto-buy-btn limited' onClick={async () => {
                      if (checkJump()) {
                        const data = await http.HPost(ACTIVITY_CHECK, {group_buy_id: props.groupBuyId})
                        if (!data) {
                          return
                        }
                        if (!(await user.checkLogin())) {
                          user.jumpLogin()
                        } else {
                          Taro.navigateTo({url: `/main/order/confirm?${getParams()}itemId=` + props.groupDetail.goods_id + '&m=limited' + '&tempSellerId=' + props.tempSellerId + `&activityId=${props.groupDetail.activity_id || ''}&isLeader=false&stepNum=${props.groupDetail.step_num}&groupPrice=${props.groupDetail.goods_price}&goodUuid=${props.goodUuid}&groupBuyId=${props.groupDetail.group_buy_id}`})
                        }
                      }
                    }}
                    >
                      <View className='top'>立即参团</View>
                    </View>}
                </View>
              </View>}
            </Block>
            }
            {!props.inSale && <View className='end no-radius limited disabled' onClick={props.onGotoBuy}>已下架</View>}
          </View>
        </View>}
      {process.env.TARO_ENV !== 'tt' && !props.showLoading && props.isShowShareButton && !(props.isFreeVisit && (process.env.P_ENV == 'vc' || process.env.P_ENV == 'kunxin')) &&
        <View className='btn-box btn-box-right'>
          <View
            className={`capsules ${(!(props.inSale && (!!props.showBuy || !!props.isSupportGroup)) || props.good.length <= 0) && 'capsules-right'}`}
          >
            {props.inSale && !props.groupDetail && process.env.SHOW_SHARE_POSTER && props.goodStatus !== 0 &&
              <View
                className={(props.inSale && (!!props.showBuy || !!props.isSupportGroup) && props.good.length > 0) ? 'share' : 'share no-radius'}
                onClick={props.onGetPoster}
              >
                <View className='top'>分享</View>
                {props.showShare && !!props.commissionPrice &&
                  <View className='bottom'>预计赚<Text className='dollar'>￥</Text><Text
                    className='true-price'
                  >{props.commissionPrice}</Text></View>}
              </View>}
            {/*如果是未开售（全是抢购未开售），显示开售提醒，并即将开售*/}
            {props.inSale && !props.groupDetail && process.env.SHOW_SHARE_POSTER && props.goodStatus == 0 &&
              <View style='display: flex;margin-left: -100px'>
                <View
                  className='share'
                  onClick={props.onGetPoster}
                >
                  <View className='top'>分享</View>
                  {props.showShare && !!props.commissionPrice &&
                    <View className='bottom'>预计赚<Text className='dollar'>￥</Text><Text
                      className='true-price'
                    >{props.commissionPrice}</Text></View>}
                </View>
                {(props.subscribe) ?
                  <View className='capsules' style='height: auto'>
                    <View className='end limited noGroupDetail noGroupDetail-right' onClick={props.removeMSG}>
                      取消提醒
                    </View>
                  </View> :
                  <Block>
                    {process.env.TARO_ENV === 'h5' ?
                      <View className='capsules' style='height: auto'>
                        <View className='end limited noGroupDetail noGroupDetail-right disabled'>即将开售</View>
                      </View> : <View className='capsules' style='height: auto'>
                        <View onClick={getMSG} className='end limited noGroupDetail noGroupDetail-right'>开售提醒</View>
                      </View>}
                  </Block>
                }</View>}
            {!props.groupDetail ? <Block>
              {props.inSale && props.showBuy && props.good.length > 0 &&
                <View style={!process.env.SHOW_SHARE_POSTER ? 'border-radius: 32px !important;' : ''}
                  className={`limited ${(props.pubFlag || props.overFlag) && 'placeDisabled'}`}
                  onClick={props.onGotoBuy}
                >
                  <View className='top'>{props.overFlag ? '已结束' : props.pubFlag ? '已下架' : '立即下单'}</View>
                  {process.env.DISTINGUISH_IDENTITY && !!props.commissionPrice &&
                    <View className='bottom'>购买返<Text className='dollar'>￥</Text><Text
                      className='true-price'
                    >{props.commissionPrice}</Text></View>}
                </View>}
              {props.isSupportGroup && props.notTwoOrder &&
                <View style={!process.env.SHOW_SHARE_POSTER ? 'border-radius: 32px !important;' : ''}
                  className='limited' onClick={props.onGotoCom}
                >
                  <View className='top'>立即下单</View>
                  {process.env.DISTINGUISH_IDENTITY && !!props.commissionPrice &&
                    <View className='bottom'>购买返<Text className='dollar'>￥</Text><Text
                      className='true-price'
                    >{props.commissionPrice}</Text></View>}
                </View>}
              {/*原来kontai按钮逻辑。20220826: category 屏蔽旅游线路*/}
              {props.isSupportGroup && process.env.P_ENV === 'kontai' && props.goods.category !== 3 &&
                <View className='goto-buy-btn limited' onClick={props.onGotoCom}>
                  {props.openDeposit == 1 ? '立即报名' : '立即下单'}
                </View>}
            </Block> : <Block>{/* 拼团 */}
              {props.inSale && props.showBuy && props.good.length > 0 &&
                <View className='goto-buy-btn share' onClick={props.onGotoBuy}>
                  <View className='top'>单独购买</View>
                  <View className='bottom'><Text className='dollar'>￥</Text><Text
                    className='true-price'
                  >{props.good[0].price}</Text></View>
                </View>}
              {props.isSupportGroup && <View className='goto-buy-btn share' onClick={props.onGotoCom}>
                <View className='top'>单独购买</View>
                <View className='bottom'><Text className='dollar'>￥</Text><Text
                  className='true-price'
                >{props.good[0].price}</Text></View>
              </View>}
              {props.good.length > 0 && <View className='box-wrapper'>
                <View className='capsules product-capsules'>
                  {!props.groupDetail.is_join && props.groupDetail.is_share === '0' &&
                    <View className='goto-buy-btn limited' onClick={handleOpen.bind(this)}>
                      <View className='top'>立即开团</View>
                      <View className='bottom'><Text className='dollar'>￥</Text><Text
                        className='true-price'
                      >{!!props.groupDetail.discounts_price ? props.groupDetail.discounts_price : props.groupDetail.group_price}</Text></View>
                    </View>}
                  {!!props.groupDetail.is_join &&
                    <View className='goto-buy-btn limited' onClick={async () => {
                      if (checkJump()) {
                        if (!(await user.checkLogin())) {
                          user.jumpLogin()
                        } else {
                          Taro.navigateTo({url: `/common/group/detail?orderNum=${props.groupDetail.order_num}&category=1&itemId=${props.goodUuid}`})
                        }
                      }
                    }}
                    >
                      <View className='top'>查看我的团</View>
                    </View>}
                  {!props.groupDetail.is_join && isLogin && props.groupDetail.is_share === '1' &&
                    <View className='goto-buy-btn limited' onClick={async () => {
                      if (checkJump()) {
                        const data = await http.HPost(ACTIVITY_CHECK, {group_buy_id: props.groupBuyId})
                        if (!data) {
                          return
                        }
                        if (!(await user.checkLogin())) {
                          user.jumpLogin()
                        } else {
                          Taro.navigateTo({url: `/main/order/confirm?${getParams()}itemId=` + props.groupDetail.goods_id + '&m=limited' + '&tempSellerId=' + props.tempSellerId + `&activityId=${props.groupDetail.activity_id || ''}&isLeader=false&stepNum=${props.groupDetail.step_num}&groupPrice=${props.groupDetail.goods_price}&goodUuid=${props.goodUuid}&groupBuyId=${props.groupDetail.group_buy_id}`})
                        }
                      }
                    }}
                    >
                      <View className='top'>立即参团</View>
                    </View>}
                </View>
              </View>}
            </Block>
            }
            {!props.inSale && <View className='end no-radius limited disabled' onClick={props.onGotoBuy}>已下架</View>}
          </View>
        </View>}
      {process.env.TARO_ENV !== 'tt' && !props.showLoading && props.isShowShareButton && (props.isFreeVisit && (process.env.P_ENV == 'vc' || process.env.P_ENV == 'kunxin')) &&
        <View className='btn-box btn-box-right'>
          <View
            className={`capsules ${(!(props.inSale && (!!props.showBuy || !!props.isSupportGroup)) || props.good.length <= 0) && 'capsules-right'}`}
          >
            <View
              className='share no-radius'
              onClick={props.onGetPoster}
            >
              <View className='top'>分享</View>
            </View>
          </View>
        </View>}
      {process.env.TARO_ENV === 'tt' && props.good.length > 0 && <Button className='snap-up-now' onClick={props.onGotoBuy}>立即抢购</Button>}
      {isGroupOpened &&
        <AtFloatLayout isOpened={isGroupOpened} onClose={handleClose.bind(this)}>
          <View className='choiceInfo-top'>
            <Image className='left-img' mode='aspectFill' onClick={showImg.bind(this)}
              src={props.goodsImg + '?x-oss-process=image/resize,w_240'}
            />
            <View className='right-info team-right-info'>
              <View className='price'>
                <View className='p-t-price'>
                  {/* 老带新 */}
                  {(props.groupDetail.activity_type === 2 || props.groupDetail.activity_type === 1) && props.groupDetail['goods_list'] && props.groupDetail['goods_list'][displayIndex] &&
                    <View className='p-t-symbol-price'><Text
                      className='symbol'
                    >￥</Text>{!!props.groupDetail['goods_list'][displayIndex].discounts_price ? props.groupDetail['goods_list'][displayIndex].discounts_price : props.groupDetail['goods_list'][displayIndex].group_price}{!!props.groupDetail['goods_list'][displayIndex].discounts_price &&
                      <Text className='symbol' style='font-weight: bold;'>券后价</Text>}</View>}
                  {/* 阶梯 */}
                  {props.groupDetail.activity_type === 3 && props.groupDetail['goods_step_list'] && props.groupDetail['goods_step_list'][displayIndex] &&
                    <View className='p-t-symbol-price'><Text
                      className='symbol'
                    >￥</Text>{!!props.groupDetail['goods_step_list'][displayIndex].step_list[displayIndexTwo].discounts_price ? props.groupDetail['goods_step_list'][displayIndex].step_list[displayIndexTwo].discounts_price : props.groupDetail['goods_step_list'][displayIndex].step_list[displayIndexTwo].group_price}{!!props.groupDetail['goods_step_list'][displayIndex].step_list[displayIndexTwo].discounts_price &&
                      <Text className='symbol' style='font-weight: bold;'>券后价</Text>}</View>}
                  <View
                    className='p-t-price-truth'
                  >拼团{(props.groupDetail.activity_type === 3 && !props.groupDetail['goods_step_list'][displayIndex].step_list[displayIndexTwo].discounts_price) ? '价' : ''}{((props.groupDetail.activity_type === 1 || props.groupDetail.activity_type === 2) && !props.groupDetail['goods_list'][displayIndex].discounts_price) ? '价' : ''}</View>
                </View>
              </View>
              <View className='price-box-price-stock'>
                {/* 老带新 */}
                {(props.groupDetail.activity_type === 2 || props.groupDetail.activity_type === 1) && <Block>
                  {props.groupDetail['goods_list'] && props.groupDetail['goods_list'][displayIndex] &&
                    <View className='stock'>价格 <Text className='symbol-price'><Text className='symbol'>￥</Text><Text
                      className='price'
                    >{props.groupDetail['goods_list'][displayIndex].goods_price}</Text></Text></View>}
                  {props.groupDetail && props.groupDetail['goods_list'] && props.groupDetail['goods_list'][displayIndex] &&
                    <View
                      className='stock'
                    >剩余 {props.groupDetail['goods_list'][displayIndex].surplus_stock} 件</View>}
                </Block>}
                {/* 阶梯 */}
                {props.groupDetail.activity_type === 3 && <Block>
                  {props.groupDetail['goods_step_list'] && props.groupDetail['goods_step_list'][displayIndex] &&
                    <View className='stock'>价格 <Text className='symbol-price'><Text className='symbol'>￥</Text><Text
                      className='price'
                    >{props.groupDetail['goods_step_list'][displayIndex].goods_price}</Text></Text></View>}
                  {props.groupDetail && props.groupDetail['goods_step_list'] && props.groupDetail['goods_step_list'][displayIndex] &&
                    <View
                      className='stock'
                    >剩余 {props.groupDetail['goods_step_list'][displayIndex].surplus_stock} 件</View>}
                </Block>}
              </View>
            </View>
            <View className='close-btn' onClick={handleClose.bind(this)}>
              <AtIcon value='close-circle' customStyle='font-size: 20px' size='20' color='#bfbfbf' />
            </View>
          </View>
          <View className='choiceInfo scenic-choiceInfo'>
            <View className='choice-specs'>
              <View className='choice-specs-list'>
                <View className='group-spec-list'>
                  {/* 老带新 */}
                  {props.groupDetail && (props.groupDetail.activity_type === 2 || props.groupDetail.activity_type === 1) && props.groupDetail['goods_list'] &&
                    <Block>{props.groupDetail['goods_list'].map((item, i) => <Text
                      onClick={choiceSpecsTeam.bind(this, i)}
                      className={`choice-specs-item ${displayIndex === i && 'on'}`}
                      key={i}
                    >{item.name}</Text>)}</Block>}
                  {/* 阶梯 */}
                  {props.groupDetail && props.groupDetail.activity_type === 3 && props.groupDetail['goods_step_list'] &&
                    <Block>{props.groupDetail['goods_step_list'].map((item, i) => <Text
                      onClick={choiceSpecsTeam.bind(this, i)}
                      className={`choice-specs-item ${displayIndex === i && 'on'}`}
                      key={i}
                    >{item.name}</Text>)}</Block>}
                  {props.groupDetail && props.groupDetail.activity_type === 3 && <View
                    className='group-type-list'
                  >{props.groupDetail && props.groupDetail['goods_step_list'] && props.groupDetail['goods_step_list'][displayIndex] &&
                    <View>
                      <View className='group-type'>拼团类型</View>
                      <View className='group-spec-list'>
                        {props.groupDetail['goods_step_list'][displayIndex].step_list.map((items, j) => <View
                          onClick={choiceSpecsTeamTwo.bind(this, j)}
                          className={`choice-specs-item ${displayIndexTwo === j && 'on'}`}
                          key={j}
                        ><Text className='price'>￥{items.group_price}</Text>/{items.people_num}人团</View>)}
                      </View>
                    </View>}
                  </View>
                  }
                </View>
              </View>
            </View>
          </View>
          <View className='detailBar othercar group-sureBtn' style='background:#fff;'>
            <View className='sureBtn' onClick={sureBtnGroup.bind(this)}>下一步</View>
          </View>
        </AtFloatLayout>
      }
      {isOpened &&
        <Block>
          <AtFloatLayout isOpened={isOpened} onClose={() => {
            setIsOpened(false)
            props.onOffCar()
          }}
          >
            <View className='choiceInfo-top'>
              <Image className='left-img' mode='aspectFill' onClick={showImg.bind(this)}
                src={props.goodsImg + '?x-oss-process=image/resize,w_240'}
              />
              <View className='right-info'>
                <View className='price'>￥
                  <Text
                    className='new-price'
                  >{!!props.good[index].discounts_price ? props.good[index].discounts_price : props.good[index].price}{!!props.good[index].discounts_price &&
                    <Text className='after-coupon'>券后价</Text>}</Text>
                </View>
                <View className='selected'>已选<Text>“{props.good[index].name}”</Text></View>
                {process.env.DETAIL_SHOW_NO && props.good[index].no &&
                  <View className='selected'>编号: <Text>{props.good[index].no}</Text></View>}
              </View>
              <View className='close-btn' onClick={() => {
                setIsOpened(false)
                props.onOffCar()
              }}
              >
                <AtIcon value='close-circle' customStyle='font-size: 20px' size='20' color='#bfbfbf' />
              </View>
            </View>
            <View className='choiceInfo'>
              <View className='choice-specs'>
                <View className='choice-specs-title'>规格</View>
                <View className='choice-specs-list choice-specs-list-other-bar'>
                  {props.good.length > 0 && props.good.map((item, i) =>
                    <Block key={i}>
                      {i == index ? <Text onClick={choiceSpecs.bind(this, i)} className='choice-specs-item on'
                        key={i}
                      >{item.name}</Text>
                        :
                        <Text onClick={choiceSpecs.bind(this, i)} className='choice-specs-item'
                          key={i}
                        >{item.name}</Text>}
                    </Block>
                  )}
                </View>
              </View>
            </View>
          </AtFloatLayout>
          <View className='detailBar othercar' style='background:#fff;border-top:none'>
            <View className='btn-box product-btn-box'>
              <View className='limit-group-btn'>
                {process.env.TARO_ENV !== 'tt' && <View className='sureBtn limited' onClick={sureBtn.bind(this)}>确定</View>}
                {process.env.TARO_ENV === 'tt' && bdInfo && <Block>
                  {(bdInfo.type === 1 || !props.good[index].isInStoreHouse) && <Block>
                    <Button className='snap-up-now' style='margin: auto;' onClick={sureBtn.bind(this)}>立即抢购</Button>
                  </Block>}
                  {bdInfo.type !== 1 && !!props.good[index].isInStoreHouse && <Block>
                    <zijie-pay-button
                      calendarData={props.calendarData}
                      isLogin={isLogin}
                      mode={2}
                      bdKey={bdKey}
                      goodsId={props.good[index].bd_spu_id}
                      goods={props.good[index]}
                    />
                  </Block>}
                </Block>}
              </View>
            </View>
          </View>
        </Block>
      }
      {modalShow &&
        <AtModal className='modal_concatWx' isOpened={Boolean(modalShow)} onClose={() => {
          setModalShow(false)
        }}
        >
          <AtModalHeader>{props.qrImgDescribe}</AtModalHeader>
          <AtModalContent>
            {props.qrImg && <Image
              mode='aspectFill'
              style='width: 120px;height: 120px;'
              src={props.qrImg}
            />}
          </AtModalContent>
          <AtModalAction>
            {process.env.TARO_ENV === 'h5' && <Text className='modal_txt'>
              有任何问题可添加<br />
              您的专属顾问进行咨询
            </Text>}
            {process.env.TARO_ENV !== 'h5' && <Text className='modal_txt'>
              有任何问题可添加\n
              您的专属顾问进行咨询
            </Text>}
          </AtModalAction>
        </AtModal>
      }
    </View>
  );
}
OtherBar.defaultProps = {
  showBuy: false,
  showService: true,
  showLoading: true,
  isLogin: false,
  groupDetail: false,
  limitGoodsId: '',
  goodsDiscountCodeType: '',
  goodsDiscountCodeId: '',
  groupBuyId: '',
  goodUuid: '',
  inSale: true,
  showShare: true,
  commissionPrice: 0,
  good: [],
  category: 0,
  tempSellerId: false,
  onOffCar: false,
  fromOrderNum: false,
  isOpened: false,
  goods: false,
  pubFlag: false,
  overFlag: false,
  wxModalShow: false
}

OtherBar.config = {
  usingComponents: process.env.TARO_ENV === 'tt' ? {
    'zijie-pay-button': '../../../components/pay-button/pay-button'
  } : {
  }
}

export default OtherBar
